<template>
  <div>
    <div id="age"></div>
    <el-table :data="tableData" class="table" border>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        align="center"
        v-for="(item, index) in ageTableHeard"
        :key="index"
      >
      </el-table-column>
      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData" v-show="tableData.length === 0">
          <!--  v-show="data.length===0" -->
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
import { birthsRatio } from "@/api/pig-statement/index.js";
import { ageTableHeard } from "./constant/index.js";
export default {
  data() {
    return {
      tableData: [
        {
          project: "母猪(头)",
          sum: 0,
        },
        {
          project: "实际比(%)",
          sum: 100,
        },
        {
          project: "标准比(%)",
          sum: 100,
        },
      ],
      standard: [22, 19, 17, 15, 13, 10, 3, 1],
      actual:[],
      ageTableHeard,
    };
  },
  created() {
    this.getTableData();
  },
  mounted() {
    this.createAge();
  },
  methods: {
    async getTableData() {
      let res = await birthsRatio({});
      let sum = 0;
      if (res.code == 200) {
        //数据处理
        res.data.forEach((resItem, resIndex) => {
          let actualThan = resItem.actualThan.split("%");
          let arr = [resItem.count, actualThan[0]];
          sum += resItem.count;
          this.tableData[0].sum = sum;
          this.tableData.forEach((item, index) => {
            this.$set(item, resItem.births, arr[index]);
          });
        });
        //设置默认值为0
        for (let i = 0; i < 8; i++) {
          let actual = this.tableData[1][i];
          let number = this.tableData[0][i];
          number ? "" : this.$set(this.tableData[0], i, 0);
          actual ? "" : this.$set(this.tableData[1], i, 0);
          this.$set(this.tableData[2], i, this.standard[i]);
          //条形图实际比
          this.actual.push(this.tableData[1][i]);
        }
        this.createAge(this.actual)
      }
    },
    createAge(actual) {
      let chart = this.$echarts.getInstanceByDom(document.getElementById("age"))
      if (chart == null) {
        chart = this.$echarts.init(document.getElementById("age"));
      }
      let option = {
        legend: {
          data: ["实际比", "标准比"],
        },
        tooltip: {
          trigger: "axis",
          show: true,
          //formatter:'{b}胎'
        },
        xAxis: { type: "category", data: [0, 1, 2, 3, 4, 5, 6, "7+"] },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name: "实际比",
            data: actual,
            type: "bar",
            smooth: true,
          },
          {
            name: "标准比",
            data: this.standard,
            type: "bar",
            smooth: true,
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
#age {
  width: 1320px;
  height: 510px;
  margin: 0 auto;
  box-shadow: 0px 0px 8px 0px rgba(40, 49, 66, 0.1);
  border-radius: 10px;
}
.table {
  width: 1320px;
  margin: 30px auto 30px;
}
</style>
